<template>
  <div class="page">
    <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm"
      @keyup.enter.native="refreshList()" @submit.native.prevent v-if="dialog">
      <!-- 搜索框-->
      <!-- <el-form-item prop="userName">
				<el-input size="small" v-model="searchForm.userName" placeholder="用户名" clearable></el-input>
			</el-form-item> -->
      <el-form-item prop="realName">
        <el-input size="small" v-model="searchForm.realName" placeholder="姓名" clearable></el-input>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input size="small" v-model="searchForm.phone" placeholder="手机号" clearable></el-input>
      </el-form-item>
      <el-form-item prop="idCard">
        <el-input size="small" v-model="searchForm.idCard" placeholder="身份证号" clearable></el-input>
      </el-form-item>
      <!-- <el-form-item prop="gradeRatings">
				<el-select v-model="searchForm.gradeRatings" placeholder="请选择等级评级" size="small" style="width: 100%">
					<el-option v-for="item in $dictUtils.getDictList('grade_ratings')" :key="item.value"
						:label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="enterpriseInformation.id">
				<GridSelect title="选择签订合同企业" placeholder="请选择签订合同企业" labelName="companyName" labelValue="id"
					:value="searchForm.enterpriseInformation.id" :limit="1" size="small" @getValue="
            (value) => {
              searchForm.enterpriseInformation.id = value;
            }
          " :columns="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'companyName',
              label: '企业名称',
            },
          ]" :searchs="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'companyName',
              label: '企业名称',
            },
          ]" dataListUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/list"
					entityBeanName="enterpriseInformation"
					queryEntityUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/queryById">
				</GridSelect>
			</el-form-item>
			<el-form-item prop="rongyunuserid">
				<el-input size="small" v-model="searchForm.rongyunuserid" placeholder="融云用户id" clearable></el-input>
			</el-form-item>
			<el-form-item prop="department.id">
				<GridSelect title="选择部门" placeholder="请选择部门" labelName="name" labelValue="id"
					:value="searchForm.department.id" :limit="1" size="small" @getValue="
            (value) => {
              searchForm.department.id = value;
            }
          " :columns="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'name',
              label: '名称',
            },
          ]" :searchs="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'name',
              label: '名称',
            },
          ]" dataListUrl="/dlyrl/hr/orporateinstitutions/orporateInstitutions/list"
					entityBeanName="orporateInstitutions"
					queryEntityUrl="/dlyrl/hr/orporateinstitutions/orporateInstitutions/queryById">
				</GridSelect>
			</el-form-item>
			<el-form-item prop="branchdepart.id">
				<GridSelect title="选择分部" placeholder="请选择分部" labelName="name" labelValue="id"
					:value="searchForm.branchdepart.id" :limit="1" size="small" @getValue="
            (value) => {
              searchForm.branchdepart.id = value;
            }
          " :columns="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'name',
              label: '名称',
            },
          ]" :searchs="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'name',
              label: '名称',
            },
          ]" dataListUrl="/dlyrl/hr/orporateinstitutions/orporateInstitutions/list"
					entityBeanName="orporateInstitutions"
					queryEntityUrl="/dlyrl/hr/orporateinstitutions/orporateInstitutions/queryById">
				</GridSelect>
			</el-form-item>
			<el-form-item prop="workCondition">
				<el-select v-model="searchForm.workCondition" placeholder="请选择工作状态" size="small" style="width: 100%">
					<el-option v-for="item in $dictUtils.getDictList('work_status')" :key="item.value"
						:label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item> -->
      <el-form-item prop="area">
        <CityPicker style="width: 100%" size="small" placeholder="选择所在地（省、市）" :value="searchForm.area" :clearable="true"
          :accordion="true" @getValue="(value) => {
              searchForm.area = value;
            }
            " />
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" @click="refreshList()" size="small">查询</el-button>
        <el-button @click="resetSearch()" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 导入导出-->
    <el-dialog title="导入Excel" :visible.sync="isImportCollapse">
      <el-form size="small" :inline="true" v-show="isImportCollapse" ref="importForm">
        <el-form-item>
          <el-button type="default" @click="downloadTpl()" size="small">下载模板</el-button>
        </el-form-item>
        <el-form-item prop="loginName">
          <el-upload class="upload-demo"
            :action="`${this.$http.BASE_URL}/dlyrl/hr/userinformation/userInformation/import`" :on-success="uploadSuccess"
            :show-file-list="true">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只允许导入“xls”或“xlsx”格式文件！
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="bg-white top">
      <el-row>
        <!-- <el-button v-if="hasPermission('dlyrl:hr:userinformation:userInformation:add')" type="primary"
					size="small" icon="el-icon-plus" @click="add()">新建</el-button> -->
        <!-- <el-button v-if="hasPermission('dlyrl:hr:userinformation:userInformation:edit')" type="warning"
					size="small" icon="el-icon-edit-outline" @click="edit()" :disabled="dataListSelections.length != 1"
					plain>修改</el-button> -->
        <el-button v-if="hasPermission('dlyrl:hr:userinformation:userInformation:del')" type="danger" size="small"
          icon="el-icon-delete" @click="del()" :disabled="dataListSelections.length <= 0" plain>
          不合适
        </el-button>
        <el-button type="success" plain size="small" @click="generateQRcode()">生成二维码</el-button>
        <!-- <el-button type="text" style="float: right; font-size: 12px" @click="setDialog">{{ dialog ? "收 起" : "展 开"
          }}<i :class="dialog ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i></el-button> -->
        <el-button-group class="pull-right">
          <el-button v-if="hasPermission('dlyrl:hr:userinformation:userInformation:import')
            " type="default" size="small" icon="el-icon-upload2" title="导入"
            @click="isImportCollapse = !isImportCollapse"></el-button>
          <el-button v-if="hasPermission('dlyrl:hr:userinformation:userInformation:export')
            " type="default" size="small" icon="el-icon-download" title="导出" @click="exportExcel()"></el-button>
          <el-button type="default" size="small" icon="el-icon-refresh" @click="refreshList">
          </el-button>
        </el-button-group>
      </el-row>
      <el-table :cell-style="cellStyle" style="border: 1px solid #d6cfe2" :header-cell-class-name="cellHeadStyle"
        :row-class-name="tableRowClassName" :data="dataList" size="small" height="calc(100% - 80px)"
        @selection-change="selectionChangeHandle" @sort-change="sortChangeHandle" v-loading="loading" class="table">
        <el-table-column type="selection" header-align="center" align="center" width="50">
        </el-table-column>
        <!-- <el-table-column prop="userName" show-overflow-tooltip label="用户名">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false" v-if="
                hasPermission('dlyrl:hr:userinformation:userInformation:edit')
              " @click="edit(scope.row.id)">{{ scope.row.userName }}</el-link>
						<el-link type="primary" :underline="false" v-else-if="
                hasPermission('dlyrl:hr:userinformation:userInformation:view')
              " @click="view(scope.row.id)">{{ scope.row.userName }}</el-link>
						<span v-else>{{ scope.row.userName }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="headPortrait" show-overflow-tooltip label="头像">
					<template slot-scope="scope" v-if="scope.row.headPortrait">
						<a :href="item" target="_blank" :key="index"
							v-for="(item, index) in scope.row.headPortrait.split('|')">
							{{decodeURIComponent(item.substring(item.lastIndexOf("/")+1))}}
						</a>
					</template>
				</el-table-column> -->
        <el-table-column prop="realName" show-overflow-tooltip label="姓名" align="center">
          <template slot-scope="scope">
            <el-link type="primary" @click="view(scope.row.id)">{{
              scope.row.realName
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="sex" show-overflow-tooltip align="center" label="性别">
        </el-table-column>
        <el-table-column prop="age" show-overflow-tooltip label="年龄" align="center">
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号" show-overflow-tooltip>
          <template slot-scope="scope">{{
            scope.row.idCard
            ? scope.row.idCard.replace(/^(\d{4})\d+(\d{4})$/, "$1****$2")
            : ""
          }}</template>
        </el-table-column>
        <el-table-column prop="phone" show-overflow-tooltip label="手机号">
        </el-table-column>
        <!-- <el-table-column prop="email" show-overflow-tooltip label="电子邮箱">
				</el-table-column> -->
        <el-table-column prop="resumeInformation.jobSearchingStatus" show-overflow-tooltip label="求职状态" align="center">
          <template slot-scope="scope">
            {{
              scope.row.resumeInformation.jobSearchingStatus == 0 ? '离职-随时到岗' :
              scope.row.resumeInformation.jobSearchingStatus == 1 ? '在职-考虑机会' :
                scope.row.resumeInformation.jobSearchingStatus == 2 ? '在职-暂不考虑' : '--'
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="resumeInformation.jobClassification.name" show-overflow-tooltip label="行业类型">
				</el-table-column>
				<el-table-column prop="resumeInformation.expectIndustry.name" show-overflow-tooltip label="期望行业">
				</el-table-column>
				<el-table-column prop="resumeInformation.jobPosts" show-overflow-tooltip label="期望岗位">
				</el-table-column> -->
        <!-- <el-table-column prop="area" show-overflow-tooltip label="所在地址">
				</el-table-column> -->
        <el-table-column prop="workingYears" show-overflow-tooltip label="工作经验(年)" align="center">
        </el-table-column>
        <el-table-column prop="currentAddress" show-overflow-tooltip label="现住址">
        </el-table-column>
        <!-- <el-table-column prop="emergencyContact" show-overflow-tooltip label="紧急联系人">
				</el-table-column>
				<el-table-column prop="emergencyContactPhone" show-overflow-tooltip label="紧急联系人电话" width="130px">
				</el-table-column> -->
        <el-table-column prop="isFit" show-overflow-tooltip label="聘用状态" align="center">
          <template slot-scope="scope">
            {{ $dictUtils.getDictLabel("is_fit", scope.row.isFit) }}
          </template>
        </el-table-column>
        <el-table-column prop="isFit" show-overflow-tooltip label="报名/操作时间" width="170" align="center">
          <template slot-scope="scope">
            {{ scope.row.resumeInformation.updateDate }}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="操作" width="180px" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-message-solid" size="mini" @click="updateRetestDialogs(scope.row.id)">面试
            </el-button>
            <el-button type="text" icon="el-icon-circle-check" size="mini" @click="updateIsPass(scope.row)">聘用
            </el-button>
            <el-button type="text" icon="el-icon-circle-check" size="mini" @click="inductions(scope.row)">入职
            </el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column header-align="center" align="center" fixed="right" :key="Math.random()" width="200"
					label="操作">
					<template slot-scope="scope">
						<el-button v-if="
						hasPermission('dlyrl:hr:userinformation:userInformation:view')
					  " type="text" icon="el-icon-view" size="mini" @click="view(scope.row.id)">查看</el-button>
								<el-button v-if="
						hasPermission('dlyrl:hr:userinformation:userInformation:edit')
					  " type="text" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)">修改</el-button>
								<el-button v-if="
						hasPermission('dlyrl:hr:userinformation:userInformation:del')
					  " type="text" icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除</el-button>
							</template>
					</el-table-column> -->
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <el-dialog title="面试登记二维码" :visible.sync="QRcodesDialog" width="20%">
        <img style="width: 100%" :src="QRcodes" />
      </el-dialog>
      <el-dialog title="通知面试" :visible.sync="updateRetestDialog">
        <el-form>
          <el-form-item size="small" label="工作时间" label-width="100px" :rules="[
            { required: true, message: '请选择工作时间段', trigger: 'blur' },
          ]">
            <el-date-picker v-model="updateData" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"></el-date-picker>
            <el-time-picker is-range v-model="updateTime" range-separator="~" value-format="HH:mm:ss"
              format="HH:mm:ss"></el-time-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="updateRetestDialog = false">关闭</el-button>
          <el-button size="small" type="primary" @click="updateRetests()" v-noMoreClick>确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="聘用时间" :visible.sync="updateRetestDialog1">
        <el-form>
          <el-form-item size="small" label="聘用时间" label-width="100px" :rules="[
            { required: true, message: '请选择聘用时间', trigger: 'blur' },
          ]">
            <el-date-picker v-model="updateData" type="datetime" placeholder="选择日期" format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"></el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="updateRetestDialog1 = false">关闭</el-button>
          <el-button size="small" type="primary" @click="updateRetests1()" v-noMoreClick>确定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <UserInformationForm ref="userInformationForm" @refreshDataList="refreshList"></UserInformationForm>
  </div>
</template>

<script>
import tableStyles from "../../../../utils/mixins.js";
import UserInformationForm from "./UserInformationForm";
import GridSelect from "@/components/gridSelect";
import CityPicker from "@/components/cityPicker";
export default {
  mixins: [tableStyles],
  data() {
    return {
      // 生成二维码
      QRcodes: "",
      QRcodesDialog: false,
      searchForm: {
        userName: "",
        phone: "",
        realName: "",
        idCard: "",
        gradeRatings: "",
        enterpriseInformation: {
          id: "",
        },
        rongyunuserid: "",
        department: {
          id: "",
        },
        branchdepart: {
          id: "",
        },
        workCondition: "",
        area: "",
      },
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      orderBy: "",
      dataListSelections: [],
      isImportCollapse: false,
      loading: false,
      dialog: true,

      //确认聘用
      updateRetestDialog: false,
      updateRetestDialog1: false,
      userId: "",
      updateData: "",
      updateTime: "",
      objparameter: {},
    };
  },
  components: {
    GridSelect,
    CityPicker,
    UserInformationForm,
  },
  activated() {
    this.refreshList();
  },
  methods: {
    //通知复试
    updateRetestDialogs(id) {
      this.updateRetestDialog = true;
      this.userId = id;
    },
    updateRetests() {
      this.$http({
        url: "/dlyrl/hr/userinformation/userInformation/updateRetest",
        method: "post",
        params: {
          id: this.userId,
          retestTime: this.updateData + " " + this.updateTime,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.$message({ message: "通知成功", type: "success" });
          this.updateRetestDialog = false;
        } else {
          this.$message.error("通知失败");
        }
      });
    },
    updateRetests1() {
      if (!this.updateData || this.updateData == '') {
        this.$message.warning('请选择聘用时间')
      } else {
        this.$http({
          url: `/dlyrl/hr/userinformation/userInformation/updateIsPass`,
          method: "POST",
          params: {
            id: this.objparameter.id,
            isPass: "0",
            arrivaldate: this.updateData,
          },
        }).then(({ data }) => {
          if (data && data.success) {
            this.updateRetestDialog1 = false;
            this.updateData = "";
            this.$message({ message: "聘用成功", type: "success" });
            this.refreshList()
          } else {
            this.$message.error("聘用失败");
          }
        });
      }
    },
    inductions(obj) {
      this.$router.push({
        path: "/flowable/task/TaskForm",
        query: {
          // procDefId:
          //   "Process_1624584750951:4:c380b4e4-7cf0-11ec-a0f5-00163e0b751f",
          // procDefKey: "Process_1624584750951",
          procDefId: "Process_1622628287658:7:25c5a554-a34a-11ec-a31a-00163e0b751f",
          procDefKey: "Process_1622628287658",
          status: "start",
          title: "入职申请单",
          formType: "2",
          formUrl: "/dlyrl/oa/applyentry/OaApplyEntryForm",
          formTitle: "入职申请",
          id: this.$route.query.id,
          userinfo: obj.id,
          realName: obj.realName,
          sex: obj.sex,
          phone: obj.phone,
          idCard: obj.idCard,
          idCardBack: obj.idCardBack,
          idCardFrond: obj.idCardFrondobj,
        },
      });
    },
    //确认聘用
    updateIsPass(obj) {
      this.updateData = "";
      this.updateRetestDialog1 = true;
      this.objparameter = obj;
    },
    //生成二维码
    generateQRcode() {
      this.$http({
        url: "/dlyrl/hr/qr/interviewCreateQRCode",
        method: "post",
        params: {
          office: this.$store.state.user.companyId,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.QRcodes = data.qr;
          this.QRcodesDialog = true;
        }
      });
    },
    setDialog() {
      this.dialog = !this.dialog;
    },
    //跳转
    enterpriseInfoRouter(url) {
      this.$router.push(url);
    },
    // 获取数据列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: "/dlyrl/hr/userinformation/userInformation/interviewList",
        method: "get",
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          orderBy: this.orderBy,
          registerOffice: this.$store.state.user.companyId,
          loginRoot: "面试登记",
          ...this.searchForm,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.dataList = data.page.list;
          this.total = data.page.count;
          this.loading = false;
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.refreshList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.refreshList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },

    // 排序
    sortChangeHandle(obj) {
      if (obj.order === "ascending") {
        this.orderBy = obj.prop + " asc";
      } else if (obj.order === "descending") {
        this.orderBy = obj.prop + " desc";
      } else {
        this.orderBy = "";
      }
      this.refreshList();
    },
    // 新增
    add() {
      this.$refs.userInformationForm.init("add", "");
    },
    // 修改
    edit(id) {
      id =
        id ||
        this.dataListSelections.map((item) => {
          return item.id;
        })[0];
      this.$refs.userInformationForm.init("edit", id);
    },
    // 查看
    view(id) {
      this.$refs.userInformationForm.init("view", id);
    },
    // 删除
    del(id) {
      let ids =
        id ||
        this.dataListSelections
          .map((item) => {
            return item.id;
          })
          .join(",");
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "/dlyrl/hr/userinformation/userInformation/updateRoot",
          method: "post",
          params: {
            ids: ids,
          },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.refreshList();
          }
          this.loading = false;
        });
      });
    },
    // 导入成功
    uploadSuccess(res, file) {
      if (res.success) {
        this.$message.success({
          dangerouslyUseHTMLString: true,
          message: res.msg,
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    // 下载模板
    downloadTpl() {
      this.$utils.download(
        "/dlyrl/hr/userinformation/userInformation/import/template"
      );
    },
    exportExcel() {
      let params = {
        ...this.searchForm,
      };
      this.$utils.download(
        "/dlyrl/hr/userinformation/userInformation/export",
        params
      );
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.refreshList();
    },
  },
};
</script>
<style scoped>
ul {
  margin: 0;
}
</style>
